<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="yes" name="apple-touch-fullscreen" />
		<meta content="telephone=no,email=no" name=format-detection />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>明细记录</title>
		<link href="../c/mobileSelect.css" rel="stylesheet" />
		<link href="../c/details.css" rel="stylesheet" />
		
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript" src="../j/mobileSelect.js"></script>
		<script type="text/javascript" src="../j/selectDate.js"></script>
	</head>
	<style>
		header {
			width: 100%;
			height: 2rem;
			background: #2B2A2A;
			padding-top: 0.75rem;
			padding-bottom: 0.5rem;
		}
		header a {
			display: block;
			float: left;
			position: relative;
			left: 3%;
		}
		header a span {
			display: block;
			width: 1.5rem;
			height: 1.5rem;
			background: url(i/back.png) no-repeat;
			background-size: auto 100%;
		}
		header p {
			width: 100%;
			text-align: center;
			font-size: 1.25rem;
			color: #fff;
		}
		.pic{
			float: left;
			width: 100%;
			overflow: auto;
		}
		.pic small{
			display: block;
			float: left;
			color: #fff;
			width: 100%;
		}
		.pic img{
			float: left;
			margin: 0.5rem 0;
			width: 5rem;
			
		}
		.time{
			width: 94%;
			margin: 1rem 3%;
			
		}
		#select_0{
			width: 40%;
			height:1.5rem;
			text-align: center;
			margin-left: 0.5rem;
		}
		.seach{
			width: 25%;
			height: 1.7rem;
			background: #ffc107;
			border: none;
			float: right;
			color: #fff;
			border-radius: 0.3rem;
		}
		.maxpic{
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background: #000;
			display: none;
		}
		.maxpic img{
			width: 70%;
			margin-left: 15%;
		}
		.posi{
			position: fixed;
			    left: 45%;
			    top: 45%;
				animation: rotate 3s linear infinite;
				display: none;
		}
		@keyframes rotate {
			0% {
				transform: rotate(0);
			}
		
			50% {
				transform: rotate(200deg);
			}
		
			100% {
				transform: rotate(360deg);
			}
		}
	</style>
	<body>
		<p class="time"><span>选择时间:</span><input type="text" id="select_0" readonly /> <button class="seach">搜索</button></p>
		<div class="details" style="overflow-y: auto;">
			<!-- <div class="details_list">
				<p class="details_p">任务标题:</p>
				<p class="status"><span>审核中</span></p>
				<p class="details_p">任务奖励: 100.00</p>
				<p class="details_p">任务占比: 20%</p>
				<p class="pic"><small>提交截图</small>
					<img class="minpic" src="../i/UIChatBox/cam1.png" />
				</p>
				<p class="time">提交日期:2020-11-20 15:21:52</p>
				<p class="bz">*
					提现失败原因:银行卡户主姓名与卡号不相符,请重新提交。
				</p>
			</div>
			<div class="details_list">
				<p class="details_p">任务标题:</p>
				<p class="status"><span>审核中</span></p>
				<p class="details_p">任务奖励: 100.00</p>
				<p class="details_p">任务占比: 20%</p>
				<p class="pic"><small>提交截图</small>
					<img class="minpic" src="../i/UIChatBox/cam1.png" />
				</p>
				<p class="time">提交日期:2020-11-20 15:21:52</p>
				<p class="bz">
					提现失败原因:银行卡户主姓名与卡号不相符,请重新提交。
				</p>
			</div> -->
		</div>
		<div class="maxpic">
			<img src="../i/UIChatBox/cam2.png" />
		</div>
		<img src="../i/footer_progress.png" class="posi">
	</body>
</html>
<script src="../j/api.js"></script>

<script>
	var page = 1;
	function renwu(time, page) {
		$(".posi").show();
		_ajax1("upload/renwu_list", function(ret, err) {
			
		},{
			time: time,
			page: 1
		})
		_ajax1("upload/renwu_list", function(ret, err) {
		    console.log(JSON.stringify(ret));
			if (ret) {
				var tpl = '';
				if (ret.ret.length > 0) {
					for (var i = 0; i < ret.ret.length; i++) {
						tpl += '<div class="details_list">';
						tpl += '<p class="details_p">任务状态:</p>';
						if (ret.ret[i].status == 0 || ret.ret[i].status == "0") {
							tpl += '<p class="status"><span>审核中</span></p>';
						} else if (ret.ret[i].status == -1) {
							tpl += '<p class="status"><span>未完成</span></p>';
						} else if (ret.ret[i].status == 1) {
							tpl += '<p class="status"><span>通过</span></p>';
						}
						tpl += '<p class="details_p">任务奖励: ' + ret.ret[i].jinbi + '</p>';
						tpl += '<p class="details_p">任务占比: ' + ret.ret[i].per + '%</p>';
						tpl += '<p class="pic"><small>提交截图</small>';
						tpl += '<img src="http://qiniu.live.kxg99.com/' + ret.ret[i].content + '" />';
						tpl += '</p>';
						var date = new Date(Number(ret.ret[i].create_at + "000")); //将接收到的的String类型的时间转为数字类型
						var y = date.getFullYear();
						var m = date.getMonth() + 1;
						var d = date.getDate();
						var hour = date.getHours().toString();
						var minutes = date.getMinutes().toString();
						var seconds = date.getSeconds().toString();
						tpl += '<p class="time">提交日期:' + y + '-' + m + '-' + d + ' ' + hour + ':' + minutes + ':' + seconds + '</p>';
						tpl += '<p class="bz">' + ret.ret[i].remarkss + '';
						tpl += '</p>';
						tpl += '</div>';


					}
					$(".posi").hide();
					$(".details").html(tpl);
				} else {
					$(".posi").hide();
					$(".details").html("<p style='margin-top:1rem;text-align: center;color:#fff'>暂无记录</p>");

				}


			}

		},{
			time: time,
			page: 1
		})

	}

	apiready=function(){
		//选择 YYYY-MM-dd 格式的调用：
		$.selectYY_MM_DD("#select_0");
		$(".details").on("click", ".pic", function() {
			var srcs = $(this).children("img").attr("src");
			$(".maxpic img").attr("src", srcs);
			$(".maxpic").show();
		})
		$(".maxpic").on("click", function() {
			$(".maxpic").hide();

		})
		var myDate = new Date;
		var year = myDate.getFullYear(); //获取当前年
		var mon = myDate.getMonth() + 1; //获取当前月
		var date = myDate.getDate(); //获取当前日
		if (mon < 10) {
			mon = "0" + mon;
		}
		if (date < 10) {
			date = "0" + date;
		}
		var time = year + "-" + mon + "-" + date
		// console.log(year + "年" + mon + "月" + date + "日");
		renwu(time, page);
		$(".seach").on("click", function() {
			var times = $("#select_0").val();
			// alert(time);
			if (times == "") {
				alert("请选择时间段！")
			} else {
				renwu(times, 1);
				page = 1;
			}

		})
		//下拉加载
		$(window).scroll(function() {
			var scrollTop = $(this).scrollTop();
			var scrollHeight = $(document).height();
			var windowHeight = $(this).height();
			if (scrollTop == 0) {
				console.log('触顶');
			}

			if (scrollTop + windowHeight == scrollHeight) {
				// alert("ss");
				var times = $("#select_0").val();
				page++;
				if (times == "") {
					// console.log("1");
					var year = myDate.getFullYear(); //获取当前年
					var mon = myDate.getMonth() + 1; //获取当前月
					var date = myDate.getDate(); //获取当前日
					if (mon < 10) {
						mon = "0" + mon;
					}

					if (date < 10) {
						date = "0" + date;
					}
					var time = year + "-" + mon + "-" + date;
					renwu(time, page);
				} else {
					renwu(times, page);
					// console.log("12");

				}

			}


		})


	}
</script>
